<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="info"></div>
    <script>
        var userinfo = {
            name: '张三',
            age: 18,
            gender: '男'
        }
        var str = '<div>{{name}}</div><div>{{age}}</div>'
            // 通过正则替换（如下的正则匹配所有{{属性名称}}这种格式的内容）
            // 小括号包裹的称之为子串
        var pattern = /{{\s*([a-zA-Z]+)\s*}}/
            // exec匹配的结果： 从 str  中提取出 {{ uname }} 和 uname
        var ret = pattern.exec(str)
        console.log(ret[1])
        var result = str.replace(ret[0], userinfo[ret[1]])

        var ret2 = pattern.exec(result)
        var result = result.replace(ret2[0], userinfo[ret2[1]])

        console.log(result)

        var div = document.querySelector('.info')
        div.innerHTML = result
    </script>
</body>

</html>